/**
 * 小程序中要引用方法，哪个页面要用，就在哪个页面引入
 */
import { cjRequest } from "../../utils/service";
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 顶部横向tabs切换栏目
    tabsList: [
      {
        id: 0,
        value: "综合",
        isActive: true,
      },
      {
        id: 1,
        value: "销量",
        isActive: false,
      },
      {
        id: 2,
        value: "价格",
        isActive: false,
      },
    ],
    // 商品列表数据
    goodsList: [],
  },
  // 接口要的参数
  QueryParams: {
    //  文字
    query: "",
    // 当前商品类型的id
    cid: "",
    // 页码
    pagenum: 1,
    // 每页数量
    pagesize: 10,
  },
  /**
   * 当前总页数（微信小程序中并不用显示页码，直接上拉触底，加载下一页数据就行）
     总页数就是 返回的总数据条数/每页显示数量pagesize
     !总页数就是用来在下拉触底时，判断当前是第几页，是否 >=总页数，如果不是，那就是后面还有数据，还能加载下一页
   */
  totalPages: 1, //写在data外的，叫做全局变量
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // options  ==》传进页面的参数
    // 赋值给请求参数
    this.QueryParams.cid = options.cid || "";
    this.QueryParams.query = options.query || "";
    // 调用商品列表获取方法
    this.getGoodsList();
  },
  // 获取商品列表数据
  getGoodsList () {
    cjRequest({ url: "/goods/search", data: this.QueryParams }).then((res) => {
      console.log(res);

      // 获取 总条数
      const total = res.data.message.total;
      /**
       * 获取到总页数  Math.ceil==》向上取整，2.3取3
         总页数 = Math.ceil(总条数 /  页容量  pagesize)
         总页数     = Math.ceil( 23 / 10 ) = 3
       */
      this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
      this.setData({
        // 拼接了数组
        /**
         * goodsList: res.goodsList  ==> 之所以不能这样，是因为直接赋值，会覆盖前一页的数据，那就滚动不回去了
         * 所以：  [...this.data.goodsList, ...res.goods]  ==》 表示：结构出原来的数据，再解构出请求返回的新数据
         * 拼接在一起，加长数据源
         *  */
        goodsList: [...this.data.goodsList, ...res.data.message.goods],
        // goodsList: res.data.message.goods
      });
    });

    /**
     *  关闭下拉刷新的窗口 （因为如果不调用关闭方法，下拉刷新会过好长一会才会关闭，即使请求已经完成，还是会显示loading，要等好久）
        如果没有调用下拉刷新的窗口 直接关闭也不会报错
        设置当请求完成后，立即关闭下拉刷新loading窗口
     */
    wx.stopPullDownRefresh();
  },
  // 获取从子组件传回来的数据
  getTabsItemChange (e) {
    // 1 获取传过来的被点击的标题索引
    const { index } = e.detail;
    // 2 修改顶部横向tabs切换栏目 源数组
    // 拿到data中叫做 tabsList 数据，复制出一份用来修改
    let { tabsList } = this.data;
    // 通过循环，将当前传过来的index的tabs的isActive设置为true，就有选中的样式了
    tabsList.forEach((v, i) =>
      i === index ? (v.isActive = true) : (v.isActive = false)
    );
    // 3 赋值修改过后的数据到data中本来的tabs数据源
    this.setData({
      tabsList,
      // 等价于===》tabsList:tabsList  (同名变量可以简写)
    });
  },

  // 页面上滑 滚动条触底事件
  onReachBottom () {
    //  1 判断还有没有下一页数据  看当前页码与最大页码数
    if (this.QueryParams.pagenum >= this.totalPages) {
      // 没有下一页数据  [花式console.log]
      //  console.log('%c'+"没有下一页数据","color:red;font-size:20px;background-image:linear-gradient(to right,#0094ff,pink)");
      // 提示没有数据了
      wx.showToast({ title: "没有下一页数据" });
    } else {
      // 还有下一页数据
      // 设置请求参数中的页码 ++
      this.QueryParams.pagenum++;
      // 再发送请求获取下一页的数据
      this.getGoodsList();
    }
  },
  // 下拉刷新事件
  onPullDownRefresh () {
    // 1 重置数组，防止还拼接的有后几页的数据
    this.setData({
      goodsList: [],
    });
    // 2 重置页码，定位到第一页
    this.QueryParams.pagenum = 1;
    // 3 发送请求
    this.getGoodsList();
  },
});
